<script setup>
import { onMounted, reactive, ref, watch, shallowRef } from 'vue';
import * as echarts from 'echarts';
import { useEcharts } from '../../stores/echartsStore'
import { storeToRefs } from 'pinia'

const store = useEcharts()
const { echartList } = storeToRefs(store)

let myChart = shallowRef()

const options = reactive({
    title:{},
    // 浮层, 鼠标移动时, 用来显示数据
    tooltip: {},
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})

onMounted(() => {
    store.handleEcharts()
    myChart = echarts.init(document.querySelector('#histogram'), 'dark');
    options.series[0].data = echartList
    window.onresize = () => {
        // 自适应大小
        myChart.resize()
    }
})

// 监听
watch(options, (newOptions) => {
    myChart.showLoading()
    myChart.setOption(newOptions)
    myChart.hideLoading()
})

</script>

<template>
    <div id="histogram"></div>
</template>

<style scoped>
#histogram {
    width: 60%;
    height: 80%;
}
</style>